<template>
    <!-- 模板组件必须在一个节点内，否则传递属性无法自动继承 -->
    <van-checkbox v-model="checked">
        <!-- 使用组件提供的 icon 插槽 -->
        <template #icon="props">
            <div style="background-color: #ff8040;color: white;height: 100%">
                {{props.checked ? 'True' : 'False'}}
                <img style="height: 100%" :src="props.checked ? activeIcon : inactiveIcon" />
            </div>
        </template>
        <slot name="aaa">默认aaa</slot>
    </van-checkbox>
</template>


<script>
    import { Checkbox, CheckboxGroup } from 'vant';
    export default {
        data() {
            return {
                checked: true,
                activeIcon: "https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png",
                inactiveIcon: "https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png",
            };
        },
        components: {
            [Checkbox.name]: Checkbox,
        },
    };
</script>